import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import { append as svgAppend, create as svgCreate } from 'tiny-svg'
import { customConfig, customElements, hasLabelElements } from '../../util'

const HIGH_PRIORITY = 1500

export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer, styles, canvas, config) {
    super(eventBus, HIGH_PRIORITY)
    this.bpmnRenderer = bpmnRenderer
    this.computeStyle = styles.computeStyle
    this.canvas = canvas
    this.config = config
    this.defaultFillColor = config && config.defaultFillColor
    this.defaultStrokeColor = config && config.defaultStrokeColor
  }

  canRender(element) {
    return !element.labelTarget
  }

  drawShape(parentNode, element) {
    const type = element.type // 获取到类型
    if (customElements.includes(type)) {
      const { url, attr } = customConfig[type]
      const customIcon = svgCreate('image', { ...attr, href: url })
      element['width'] = attr.width
      element['height'] = attr.height
      svgAppend(parentNode, customIcon)
      // 判断是否有name属性来决定是否要渲染出label
      if (!hasLabelElements.includes(type) && element.businessObject.name) {
        const text = svgCreate('text', {
          x: attr.x + 5,
          y: attr.y + attr.height + 15,
          'font-size': '12',
          'fill': '#8c8484'
        })
        text.innerHTML = element.businessObject.name
        svgAppend(parentNode, text)
      }
      return customIcon
    }
    return this.bpmnRenderer.drawShape(parentNode, element)
  }

  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape)
  }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'styles', 'canvas', 'config']
